<template>
	<div class="system-edit-user-container">
		<el-dialog title="修改商品信息" v-model="isShowDialog" width="769px">
			<el-form :model="productInfoShow" size="small" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品编号">
							<el-input v-model="productInfoShow.productId" disabled  clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品名称">
							<el-input v-model="productInfoShow.productName" placeholder="请输入商品名称" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品价格">
							<el-input v-model="productInfoShow.productPrice" placeholder="请输入商品价格" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品库存">
							<!-- <el-input v-model="productInfoShow.productStock" placeholder="请输入商品名称" clearable></el-input> -->
							<el-input-number v-model="productInfoShow.productStock" :min="0" :max="99999999" />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品类目">
							<el-select v-model="productInfoShow.categoryId" placeholder="请输入商品类目">
								<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"> </el-option> -->
								<el-option v-for="item in options" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" > </el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品状态">
							<el-select v-model="productInfoShow.productStatus" placeholder="请选择" clearable class="w100">
								<el-option v-for="item in optionsStatus" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"> </el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="商品描述">
							<el-input v-model="productInfoShow.productDescription" type="textarea" placeholder="一句话介绍你的商品(不能有空格)" maxlength="150"></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="商品图片">
							<el-upload :on-success="uploadSucess" :show-file-list="false" class="h100 personal-user-left-upload" action="http://lzyzone.top:8009/orderback/image/upload/seller" multiple="false">
								<img style="width:200px;height:200px" :src="productInfoShow.productIcon"/>
							</el-upload>
							<!-- <img :size="50" class="el-upload-list__item-thumbnail" :src="productInfoShow.productIcon" /> -->
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">修 改</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, getCurrentInstance, computed} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {updateProductInfo} from '/@/api/product/product.ts';
import { useStore } from '/@/store/index';
import {categoryList} from '/@/api/product/category.ts';
export default {
	name: 'systemEditUser',
	setup() {
		const state = reactive({
			options: {},
			isShowDialog: false,
			productInfoShow: {
				
			},
			deptData: [], // 部门数据
		});
		const { proxy } = getCurrentInstance() as any;
		const store = useStore();

		// 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
		});




		// let options = [
		// 	{
		// 		value: 1,
		// 		label: '商品类目1',
		// 	},
		// 	{
		// 		value: 2,
		// 		label: '商品类目2',
		// 	},
		// 	{
		// 		value: 3,
		// 		label: '商品类目3',
		// 	},
		// 	{
		// 		value: 4,
		// 		label: '商品类目4',
		// 	},
		// 	{
		// 		value: 5,
		// 		label: '商品类目5',
		// 	},
		// ];
		// 打开弹窗
		const openDialog = (row: Object) => {
			console.log(row)
			
			state.productInfoShow = {...row};
			// 请求商家的商品类目初始化
			initTableData();
			// let sellerId = store.state.userInfos.userInfos.id;
			// console.log("请求商家的商品类目初始化" + sellerId)
			

			// console.log(productInfoShow)
						//  初始化类目
			// categoryList(store.state.userInfos.userInfos.id)
			// 	.then((res:any) =>{
					
			// 		options = res.data.categoryList;
			// 		console.log(res);
			// 		console.log(options);
					state.isShowDialog = true;
			// 	})
			
		};
		
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 修改
		const onSubmit = () => {
			// 修改商品信息
			updateProductInfo({...state.productInfoShow})
				.then((res:any) =>{
					// 重新刷新
					proxy.mittBus.emit('initTableData');
					ElMessage.success("修改: " + state.productInfoShow.productId + "成功!");
					closeDialog();
				})
				.catch((err:any) =>{

				})
		};
		// 初始化部门数据
		const initTableData = () => {
				categoryList(store.state.userInfos.userInfos.id)
				.then((res:any) =>{
					
					state.options = res.data.categoryList;
					console.log(res);
					console.log(state.options);
					// state.isShowDialog = true;
				})
		};



		const  optionsStatus = [
			{
				value: 0,
				label: '上架'
			}, 
			{
				value: 1,
				label: '下架'
			}
		];

		// 页面加载时
		onMounted(() => {
			// initTableData();
		});


			// 图片上传成功的回调函数
		const uploadSucess = (response: any) => {
			console.log(1111111111);
			console.log(response);
			// http://localhost:8009/images/iu.jpg
			// state.userUrl = response.data.filePath;
			// console.log(response.data.filePath);
			// const sellerInfo = {
			// 	nickname: response.data.filePath
			// }
			//  更改图片
			state.productInfoShow.productIcon = response.data.filePath;
			console.log("图片更改的地址" + state.productInfoShow.productIcon);
			
		};
		return {
			uploadSucess,
			getUserInfos,
			store,
			initTableData,
			optionsStatus, // 商品状态选择。
			// options, // 商品类目
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>

<style scoped>
	img {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
		/* .personal-user-left-upload {
				img {
					width: 100%;
					height: 100%;
					border-radius: 3px;
				}
				&:hover {
					img {
						animation: logoAnimation 0.3s ease-in-out;
					}
				}
			} */
</style>
